<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
 <title>用户管理-角色分配</title>
 <%@include file="/common/head.jsp" %>
 <link href="<%=request.getContextPath()%>/static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
 <script src="<%=request.getContextPath()%>/static/plugin/zTree/js/jquery.ztree.all-3.5.min.js"></script>
</head>
<style type="text/css">
 .tree-wrap {
    position: static;
    border: 1px solid #e1e6eb;
    box-sizing: border-box;
    width: 250px;
    color: #212121;
}
.tree-title {
    border-bottom: 1px solid #e1e6eb;
    text-indent: 10px;
    background-color: #f5f8fa;
}
.tree-content {
    min-height: 360px; 
    height: 360px;  
    padding: 5px; 
    overflow: auto;
    position: static;
}
.left{
    float: left;
}
#wrap {
   overflow:hidden; 
}
</style>
<body class="iframe-page">
<div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>用户管理</span>
            <span class="split"></span>
            <span>角色分配</span>
        </div>
        <a id="goBack" class="btn-return distance-left" href="javascript:;"><i class="icon icon-arrow-left"></i>返回上级</a>
    </div>
    <div class="page-title-border"></div>
</div>

<div class="form-wrapper">
        <div class="form-cont">
            <p class="form-cont-title">登录名</p>
            <input type="text" class="summer-input" value="${sysUser.username }" readonly="readonly">
        </div>
        
        <div class="form-cont">
            <p class="form-cont-title">姓名</p>
            <input type="text" class="summer-input" value="${sysUser.realname }" readonly="readonly">
        </div>
        
        <div class="form-cont">
            <p class="form-cont-title" style="float:left;">角色分配</p>
            <div id="wrap">
            <div class="tree-wrap left">
                <div class="tree-title">
                                    已分配角色
                </div>
                <div class="tree-content">
                   <ul id="assignTree" class="ztree"></ul>
                </div>
            </div>
            <div class="tree-wrap left" style="border-left: 0;background-color: #fafafa;">
                <div class="tree-title" style="color: #757575">
                                    未分配角色 
                </div>
                <div class="tree-content">
                   <ul id="unAssignTree" class="ztree"></ul>
                </div>
            </div>
        </div>
        </div>
        
</div>

<form id="userForm">
<input id="userId" name="userId" value="${sysUser.id }" type="hidden">
<input id="roleIds" name="roleIds"  type="hidden">

<div class="form-btn-wrapper" id="funcbar">
        <!-- <a class="btn btn-normal btn-ok distance-right" id="saveBtn">角色分配</a> -->
        <a class="btn btn-normal" id="closeBtn">关闭</a>
</div>
</form> 
<script>
    var unAssignTree,
        assignTree,
        permission = CommonUtil.getPermission('user');
    
    $(function(){
    	//初始化funcbar
	   	$('#funcbar').prepend($.funcbar({
	            type: 'button',
	            data: permission,
	            permit: ['user:roleAssign']
	    }));
    	
    	//初始化树
    	var assignRolersData = ${assignRolers};
    	var unAssignRolersData = ${unAssignRolers};
    	initTree('unAssignTree', clickTree, unAssignRolersData);
    	initTree('assignTree', clickTree, assignRolersData);
    	
    	//角色分配
    	$('#funcbar').on('click', 'a[data-permit="user:roleAssign"]', roleAssign);
    	
    	//返回主页
    	$('#closeBtn, #goBack').on('click', backHome);
    });
    
    
    function clickTree(event, treeId, treeNode) {
    	var addNodes = [];
    	//未分配树点击时，节点右移动已分配角色并选中
    	if (treeId == 'unAssignTree') {
    		//移除左侧树
    		unAssignTree.checkNode(treeNode, true, true);
    		unAssignTree.removeNode(treeNode);
    		//右侧添加
    		addNodes.push(treeNode);
    		assignTree.addNodes(null, addNodes );
    	} else if (treeId == 'assignTree') {
    		//右侧移除
    		assignTree.checkNode(treeNode, false, true);
    		assignTree.removeNode(treeNode);
    		//左侧添加
            addNodes.push(treeNode);
            unAssignTree.addNodes(null, addNodes);
    	}
    }
    
    //角色分配
    function roleAssign() {
    	getCheckRoles();
    	$("#userForm").form({
            buttons : ['#saveBtn'],
            ajax: {
                url: USER_CONST_URL.ROLE_ASSIGN
            },
            onSubmitSuccess: function (data) {
            	$.stip({
  	                type:'ok',//显示类型 有info、 ok、 danger
  	                text: '角色分配成功！',
  	                onBeforeHide: function () {
  	                	backHome();
  	               }
              	});
             }
        }).form("submit");
    }
    
    
    //获取已分配的角色id
    function getCheckRoles() {
    	var nodes = assignTree.getCheckedNodes(true),
        nodeIds = [];
	    $.each(nodes, function(index, node){
	        nodeIds.push(node.id);
	    });
	    $('#roleIds').val(nodeIds.join(','));
    }
    
    //初始化资源树
    function initTree(id, click, data) {
        // ztree 初始化设置 
        var setting = {  
            data: {
                   simpleData: {
                       enable: true,
                       idKey: 'id',  // idkey
                       pIdKey: 'parentId' // 父IDkey
                   }
               },
	        check: {
	            enable: true,
	            chkStyle: "checkbox",
	            chkboxType : { "Y" : "ps", "N" : "ps" }
	        },
	        callback: {
	            onClick: click,
	            onCheck: click
	        }
        };
        if (id == 'unAssignTree') {
        	unAssignTree = $.fn.zTree.init($('#' + id), setting, data);
        } else {
        	assignTree = $.fn.zTree.init($('#' + id), setting, data);
        	//已分配选中所有
        	assignTree.checkAllNodes(true);
        }
        
    }
  
    
    function backHome() {
      window.location.href = USER_CONST_URL.INIT_MAIN;
   }
    
    var USER_CONST_URL = {
       INIT_MAIN: basePath + '/sys/user/init',
       ROLE_ASSIGN: basePath + '/sys/user/roleAssign'
    };
</script>
</body>
</html>